<template>
  <el-dialog
          :model-value="personDialogVisible"
          :title="personDialogTitle"
          :before-close="handleCanclePersonDialog"
          top="10vh"
          width="60%"
  >
    <el-card class="mb10">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="名称" label-align="right" label-class-name="labelpref">{{personInfoData.name}}</el-descriptions-item>
        <el-descriptions-item label="英文名称" label-align="right" label-class-name="labelpref">{{personInfoData.enname}}</el-descriptions-item>
        <el-descriptions-item label="性别" label-align="right" label-class-name="labelpref">{{personInfoData.gender}}</el-descriptions-item>
        <el-descriptions-item label="血型" label-align="right" label-class-name="labelpref">{{personInfoData.bloodtype}} 型</el-descriptions-item>
        <el-descriptions-item label="出生地" label-align="right" label-class-name="labelpref">{{personInfoData.birthplace}}</el-descriptions-item>
        <el-descriptions-item label="星座" label-align="right" label-class-name="labelpref">{{personInfoData.constellation}}</el-descriptions-item>
        <el-descriptions-item label="出生日期" label-align="right" label-class-name="labelpref">{{personInfoData.birthdate}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="成就" label-align="right" label-class-name="labelpref">{{typeof personInfoData.achievement == 'object' && personInfoData.achievement !== null ? personInfoData.achievement.join('、') : ''}}</el-descriptions-item>
        <el-descriptions-item label="职业" label-align="right" label-class-name="labelpref">{{typeof personInfo.occupation == 'object' && personInfo.occupation !== null ? personInfo.occupation.join('、') : ''}}</el-descriptions-item>
        <el-descriptions-item label="作品" label-align="right" label-class-name="labelpref">{{typeof personInfoData.works == 'object' && personInfoData.works !== null ? personInfoData.works.join('、') : ''}}</el-descriptions-item>
        <el-descriptions-item label="简介" label-align="right" label-class-name="labelpref">{{personInfoData.profile}}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-dialog>
</template>

<script>
  import {toRef} from 'vue'
  export default {
    name: "PersonInfo",
    props: {
      personDialogVisible: {
        type: Boolean,
        default: false
      },
      personInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      personDialogTitle: {
        type: String,
        default: ''
      }
    },
    emits: ['handleCanclePersonDialog'],
    setup(props, context) {
      const personInfoData = toRef(props, 'personInfo')

      /** 关闭人物详情弹框 **/
      const handleCanclePersonDialog = () => {
        context.emit('handleCanclePersonDialog')
      }

      return {
        personInfoData,
        handleCanclePersonDialog
      }
    }
  }
</script>

<style lang="scss">
  .labelpref{width:95px;}
  .personinfo{
    display: flex;
    flex-wrap: wrap;
    li {
      display:flex;
      margin-bottom: 10px;
      width: 50%;
      font-size: 12px;
      span{
        display: inline-block;
        color:#333;
      }
      >span:first-child{
        color:#999;
      }
      >span:last-child{
        width:80%;
      }
    }
  }
</style>
